import React, { useRef, useState } from 'react';
import { Row, Col, Card, Statistic, Avatar,Tour, Button } from 'antd';
import { FundTwoTone,AlertTwoTone,ControlTwoTone,SwapLeftOutlined} from "@ant-design/icons"; // 导入ArrowLeftOutlined图标
import '../../styles/common.css'
import { useTranslation } from 'react-i18next';
import type { TourProps } from 'antd';
const InfoCard: React.FC = () => {
  const { t } = useTranslation();
  const ref1 = useRef(null);
  const ref2 = useRef(null);
  const ref3 = useRef(null);

  const [open, setOpen] = useState<boolean>(false);

  const steps: TourProps['steps'] = [
    {
      title: '用户统计',
      description: '你可以在这里查看用户的统计',
      cover: (
        <img
          alt="tour.png"
          src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
        />
      ),
      target: () => ref1.current,
    },
    {
      title: '今日来源',
      description: '你可以在这里查看用户的来源.',
      target: () => ref2.current,
    },
    {
      title: '今日用户',
      description: '你可以在这里查看今日的用户',
      target: () => ref3.current,
    },
  ];
  return (
    <Row gutter={16}>
    <Col span={8}>
      <Button type='primary' onClick={() => setOpen(true)}>新人指引 <SwapLeftOutlined/></Button>
      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
      <Card title={t('today_ visits')} bordered={false} ref={ref1}>
       <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <FundTwoTone className='icon_box_content' />  
            <Statistic style={{float: 'right'}} title="访问次数" value={100}   />
        </div>
      </Card>
    </Col>
    <Col span={8}>
      <Card title={t('today_ sources')} bordered={false} ref={ref2}>
        <div style={{ fontSize: '24px' }}>
          <Statistic style={{float: 'right'}} title="来源数量" value={100} />
        </div>
        <AlertTwoTone   className='icon_box_content'   />
      </Card>
    </Col>
    <Col span={8}>
      <Card title={t('today_ users')} bordered={false}  ref={ref3}>
        <div style={{ fontSize: '24px' }}>
          <Statistic style={{float: 'right'}} title="登录用户" value={100} />
        </div>
        <ControlTwoTone  className='icon_box_content'  />
      </Card>
    </Col>
  </Row>
  );
};

export default InfoCard;